<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
    data: {
        text: 'init data',
        array: [{text: 'init data'}],
        object: {
            text: 'init data'
        }
    },
    changeText: function() {
        // this.data.text = 'changed data'  // bad, it can not work
        this.setData({
            text: 'changed data'
        })
    },
    changeItemInArray: function() {
        // you can use this way to modify a danamic data path
        var changedData = {}
        var index = 0
        changedData['array[' + index + '].text'] = 'changed data'
        this.setData(changedData)
    },
    changeItemInObject: function(){
        this.setData({
            'object.text': 'changed data'
        });
    },
    addNewField: function() {
        this.setData({
            'newField.text': 'new data'
        })
    }
})